import React, { useState, useEffect, createRef } from 'react'
import { useNavigate } from "react-router-dom";
import styles from '../../style/childPublic/childPublic.module.less'
import conBack from '../../style/contentBack/contentBack.module.less'
import { Timeline, Button, message, Input, Drawer, FloatButton, Modal } from 'antd';
import HeaderTop from "../../components/HeaderTop/HeaderTop";
import Editor from '../../components/Editor/Editor'
import { CloseCircleOutlined, ExclamationOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { pubLishList, htAfficheById, htAfficheDelete } from '../../apis/policyInformation'
export default function LawEnforcementSupervision() {
    const navigate = useNavigate()
    const [messageApi, contextHolder] = message.useMessage();
    const key = 'updatable';
    const [title] = useState('执法监管信息发布管理')
    const [mode, setMode] = useState('left');
    const [list, setList] = useState([
        {
            label: '2015-09-01',
            children: 'Create a 1',
        }
    ])
    const onChange = (e) => {
        setMode(e.target.value);
    };
    const [contentList, setContentList] = useState([])
    const [showBox, setShowBox] = useState(false)
    const [html, setHtml] = useState('')
    const keyWordsRef = createRef();
    const [keyWords, setKeyWords] = useState('')
    const [dataItem] = useState({
        sheng_id: localStorage.getItem('sheng_id'),
        shi_id: localStorage.getItem('shi_id'),
        xian_id: localStorage.getItem('areaId'),
        type: 4,
    })
    const [openOne, setOpen] = useState(false);
    const [modal, contextHolder_] = Modal.useModal();
    useEffect(() => {
        pubLish()
    }, []);
    // 信息发布管理列表
    const pubLish = async () => {
        messageApi.open({
            key,
            type: 'loading',
            content: '数据加载中...',
        });
        const { data } = await pubLishList({ type: 4, xian_id: localStorage.getItem('areaId') })
        if (data.state === 1) {
            const newArray = []
            data.list.forEach(item => {
                newArray.push({ label: item.create_time_str, children: item.name, id: item.id })
            })
            setList(newArray)
            messageApi.open({
                key,
                type: 'success',
                content: '数据加载完成!',
                duration: 2,
            });
        } else {
            messageApi.open({
                key,
                type: 'error',
                content: data.msg,
                duration: 2,
            });
        }
    }
    const addArticle = () => {
        setShowBox(!showBox)
    }
    const onClose = () => {
        setOpen(false);
    };
    const [oneId, setOneId] = useState('')
    // 点击某篇文章
    const getOpen = (id) => {
        htAfficheByIdGet(id)
        setOpen(true);
        setOneId(id)
    }
    const [htmContent, setHtmContent] = useState({})
    const htAfficheByIdGet = async (id) => {
        const { data } = await htAfficheById({ id })
        setHtmContent(data.data)
    }
    // 删除
    const htDelete = async () => {
        const { data } = await htAfficheDelete({ idArr: [oneId] })
        if (data.state === 1) {
            messageApi.open({
                key,
                type: 'success',
                content: '删除成功',
                duration: 100,
            });
            setTimeout(function () {  //延迟
                setOpen(false);
                pubLish()
            }, 2000)
        } else {
            messageApi.open({
                key,
                type: 'error',
                content: data.msg,
                duration: 1000,
            });
        }
    }
    const confirm = () => {
        modal.confirm({
            title: '注意',
            icon: <ExclamationCircleOutlined />,
            content: '确定要删除文章吗？',
            okText: '确认',
            cancelText: '取消',
            onOk() {
                htDelete()
            },
            onCancel() {
            }
        });
    };
    const updataAirt = () => {
        var newArry = { ...dataItem, id: oneId }
        navigate('/UpdataPage', { state: { newArry } });
    }
    return (
        <div div className={styles.pubBack}>
            {contextHolder}
            <HeaderTop title={title}></HeaderTop>
            <div className={conBack.contentBack}>
                <span className={conBack.topTitle}>信息发布管理列表</span>
                <div className={conBack.timeBox}>
                    {/* 当角色id为8的时候为经销商账户，不具备新增功能 */}
                    {
                        Number(localStorage.getItem('roleId')) !== 8 ?
                            <div className={conBack.butAdd}>
                                <Button type="primary" onClick={() => addArticle()}>新增</Button>
                            </div> : ''
                    }
                    <div className={conBack.timeLine}>
                        <Timeline mode={mode}>
                            {
                                list.map(item => {
                                    return (
                                        <Timeline.Item onClick={() => getOpen(item.id)}>{item.children}</Timeline.Item>
                                    )
                                })
                            }
                        </Timeline>
                    </div>
                    <div className={showBox === true ? `${conBack.popBox} ${conBack.showBox}` : `${conBack.popBox} ${conBack.noShowBox}`}>
                        <div className={conBack.inputK}>
                            <Input placeholder="请输入文章标题" ref={keyWordsRef} value={keyWords} onChange={() => {
                                setKeyWords(keyWordsRef.current.input.value)
                            }} />
                        </div>
                        <Editor html={html} setHtml={setHtml} keyWords={keyWords} dataItem={dataItem} ></Editor>
                        <div className={conBack.but}>
                            <Button type="primary" onClick={() => addArticle()}>取消</Button>
                        </div>
                    </div>
                    {contextHolder_}
                </div>
            </div>
            <Drawer title={htmContent.name} width='1600' onClose={onClose} open={openOne} placement="left">
                <div dangerouslySetInnerHTML={{ __html: htmContent.info }} />
                {
                    Number(localStorage.getItem('roleId')) !== 8 ?
                        <>
                            <FloatButton
                                icon={<CloseCircleOutlined />}
                                type="primary"
                                description="删除"
                                onClick={confirm}
                                style={{
                                    right: 24,
                                }}
                            />
                            <FloatButton
                                icon={<ExclamationOutlined />}
                                type="primary"
                                description="修改"
                                onClick={() => updataAirt()}
                                style={{
                                    right: 94,
                                }}
                            /></> : ''
                }
            </Drawer>
        </div>
    )
}
